<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>订单支付-乐鲜生活</title>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="bookmark" href="favicon.ico" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/payorder.css" />
	<link rel="stylesheet" type="text/css" href="css/asyncbox/asyncbox.css" />
	<link rel="stylesheet" type="text/css" href="css/asyncbox/asyncboxoverride.css" />
	<style type="text/css">
		.tfg {
			position: absolute;
			right: 0px;
			top: 80px;
			font-size: 15px;
			font-weight: bold;
		}
		
		.tfg li {
			padding-left: 100px;
			display: inline-block
		}
		
		.payLt {
			height: 60px;
			background: #ECE6E5;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="header"></div>
		<div class="header distance_top">
			<div class="column_z">
				<ul>
					<li class="fist_li_z">个人中心</li>
					<li class="com_li com_li_color"><a href="index.html" class="icon_z_1">首页</a></li>
				</ul>
				<div class="clr"></div>
				<div class="shopping_car">
					<a href="cart.html"> 我的购物车</a> <span class="tips2">0</span>
					<div class="shopping_car_list">
						<p class="first_paragraph"></p>
						<p class="second_paragraph">购物车中还没有商品，赶快选购吧！</p>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="content">
				<div class="content-top" style="position: relative">
					<div class="title floatLeft">
						<h3 class="add_to_h3">订单提交成功，请尽快付款!</h3>
					</div>
					<div class="title-img floatRight">
						<img src="images/fuk2.png" alt="" />
					</div>
					<ul class="tfg">
						<li>提交订单</li>
						<li>订单支付</li>
						<li>支付成功</li>
					</ul>
					<div class="clr"></div>
				</div>
			</div>
			<div class="content_bank">
				<div class="header_top">
					<!--头部开始部分-->
					<div class="header_topa headerp_top">
						<ul>
							<li class="header_topab" id="orderNo" style="font-size: 18px">订单编号：</li>
							<li class="header_topac" styel="margin-right:40px">请您在提交订单后<span>20分钟</span>内完成支付，否则订单将自动取消</li>
						</ul>
					</div>

				</div>
				<div class="content_font">
					<p>
						<input type="radio" name="theType" value="3" />
						<span class="bg1">
							<!-- 支付宝支付 -->
						</span>
					</p>
					<p>
						<input type="radio" name="theType" value="2" />
						<span class="bg2">
							<!-- 银联支付 -->
						</span>
					</p>
					<p>
						<input type="radio" name="theType" value="1" checked="checked" />
						<span class="bg3">
							<!-- 余额支付 -->
						</span>
					</p>

					<div class="payLt" style="poaistion: relative">
						<div style="width: 150px; float: left; margin-top: 20px; margin-left: 62px;">
							应付金额：<span style="font-size: 20px; color: #ff4200" id="money"></span>&nbsp;
							<span style="color: #ff4200">元</span>
						</div>
						<button class="" type="button" id="submit">立即支付</button>
					</div>
				</div>
			</div>
		</div>
		<div id="footer"></div>
	</div>

	<div id="checkPasswd" style="display: none;">
		<div style="margin-top: 30px; margin-left: 10px">
			<span style="font-size: 14px">支付密码：</span>
			<input style="height: 30px; width: 200px; font-size: 20px; text-indent: 3px;" id="passwd" type="password" />
		</div>
		<p style="margin-top: 20px; font-size: 15px; text-indent: 12px">提示：支付密码就是您的登录密码！</p>
		<div class="clear"></div>
	</div>
	<script type="text/javascript" src="js/site/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/site/AsyncBox.v1.4.js"></script>
	<script type="text/javascript" src="js/site/validate.js"></script>
	<script type="text/javascript" src="js/site/common.js"></script>
	<script type="text/javascript" src="js/site/String.js"></script>
	<script type="text/javascript">
		var orderNo = util.getParam("orderNo");
		$(function() {
			findShopCarCount();
			if (!util.isLogin()) {
				window.location = "login.html";
			}
			$("#orderNo").text("订单编号：" + orderNo);
			$.postAjax("/order/findOrderSimple.do", {
				orderNo : orderNo
				}, function(json) {
					if (json.code) {
						asyncbox.tips(json.message, asyncbox.Level.error);
						return;
					}
					$("#money").text(parseFloat(json.data.totalAmount).toFixed(2));
				});
	
			// 获取验证码, 此处删去了获取验证码的步骤
			/*
			$("#validateCode").click(function() {
				var data = {
					type : 6,
					platformCode : 2,
					phone : phone
				};
				$.postAjax("/validation/getValidateCode.do", data, function(json) {
					if (json.code) {
						asyncbox.tips(json, asyncbox.Level.error);
						return;
					}
					pingpp.createPayment(json.data, function(result, err) {
						window.console.info(err);
					});
					asyncbox.tips(json.message, asyncbox.Level.success);
				});
			});
			*/
	
			// 提交支付
			$("#submit").click(function() {
				var values = $("input:radio:checked").attr("value");
				if (!values) {
					return asyncbox.tips("请选择支付方式！", asyncbox.Level.error);
				}
				if (values == 1) {		// 目前只支持余额支付
					checkPasswd(orderNo);
				}
			});
		});
	
		function payOrder(data) {
			$.postAjax("/order/updateOrderPay.do", data, function(json) {
				if (json.code) {
					asyncbox.tips(json.message, asyncbox.Level.error);
					return;
				}
				window.location = "paysuccess.html?orderNo=" + orderNo;
			});
		}
		
		function findShopCarCount() {
			$.postAjax("/commodity/getTrolleyCount.do", {}, function(json) {
				if (json.code) {
					asyncbox.tips(json.message, asyncbox.Level.error);
					return;
				}
				var count = eval("(" + json.data + ")")
				$(".shopping_car>span[class='tips2']").text(count);
			});
		}
	
		function checkPasswd(orderNo) {
			asyncbox.open({
				id : "checkPasswd",
				title : "支付验证",
				width : 350,
				height : 200,
				btnsbar : $.btn.OKCANCEL,
				callback : function(action, opener) {
					var passwd = $.trim($("#passwd").val());
					var data = {
						password : passwd,
						orderNo : orderNo
					}
					if (action == 'ok') {
						payOrder(data);
					}
				}
			});
		};
	</script>
</body>
</html>
